{extend name="base" /}
<!-- page specific plugin styles -->
{block name="plugin-styles"}{/block}
<!-- inline styles related to this page -->
{block name="inline-styles"}
<link rel="stylesheet" href="/static/ace/assets/css/bootstrap-datepicker3.min.css" />
<style type="text/css">
.mybtn{
    margin-left: 5px !important;
}
</style>
{/block}
<!-- breadcrumb -->
{block name="breadcrumbs"}
<ul class="breadcrumb">
    <li>
        <i class="ace-icon fa fa-home home-icon"></i>
        <a href="{:url('Index/index')}">首页</a>
    </li>
    <li class="active">统计图表</li>
</ul>
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<!-- /.page-header -->
<div class="tabbable">
    <ul class="nav nav-tabs padding-18">
        <li class="active"><a data-toggle="tab" href="#info" aria-expanded="true"> <i
                class="green ace-icon fa fa-book bigger-120"></i> 订单趋势图
        </a></li>
    </ul>
    <div class="tab-content  padding-24">

            <!-- 费率趋势图 begin-->
            <div id="info" class="tab-pane active">
                    <div class="row">
                        <div class="pull-left form-inline col-xs-12">
                            <form class="form-inline" action="">
                                <div class="form-group">
				                    <div class="input-daterange input-group"  style="width:300px" >
				                        <input type="text" class="input-sm form-control" id='startTime' name="startTime" value='{$startDate}' data-date-format="yyyymmdd" placeholder="开始时间" autocomplete = "off"/>
				                        <span class="input-group-addon"><i class="fa fa-exchange"></i></span>
				                        <input type="text" class="input-sm form-control"  id='endTime'name="endTime" value='{$endDate}' data-date-format="yyyymmdd" placeholder="结束时间" autocomplete = "off"/>
				                    </div>
				                </div>
                                
                                <div class="form-group">
                                    <div class="input-group">
                                       <span class="input-group-btn">
                                            <button type="button" onclick="dosearch()"
                                                class="btn btn-purple btn-xs">
                                                <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                                查询
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </form>

                        </div>
                        <div class="col-xs-9 col-md-2"></div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                <div id="main" style="width:100%; height:400px"></div>
                
            </div>
        <!-- 费率趋势图 end -->
        
    </div>
</div>

{/block}
<!-- PAGE CONTENT ENDS -->
<!-- page specific plugin scripts -->
{block name="plugin-scripts"}
<script src="/static/ace/assets/js/jquery.dataTables.min.js"></script>
<script src="/static/ace/assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="/static/ace/assets/js/moment.min.js"></script>
<script src="/static/ace/assets/js/bootstrap-datepicker.min.js"></script>
 <script src="/static/ace/assets/js/daterangepicker.min.js"></script>
 <script src="/static/ace/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="/static/js/echarts.min.js"></script>

{/block}
<!-- inline scripts related to this page -->
{block name="related-scripts"}

<script type="text/javascript">
    var myTable;
    
    //根据搜索重新绑定表格
    function dosearch(){
        showChart();
    }
    
    $('#date-range-picker-query').daterangepicker({
        'applyClass' : 'btn-sm btn-success',
        'cancelClass' : 'btn-sm btn-default',
        locale: {
            applyLabel: '确认',
            cancelLabel: '取消',
            format: 'YYYYMMDD'
        },
    }).prev().on(ace.click_event, function(){
        $(this).next().focus();
    });

    var myChart = echarts.init(document.getElementById('main'));

    option = {
            title: [{
                left: 'center',
                    text: '订单趋势图'
                }],
                tooltip: {
                    trigger: 'axis'
                },
            };
        myChart.setOption(option);
        showChart();
    
        function showChart(){
         // 异步加载数据
            $.get('{:url('stats/rs')}',{ start_date : $('#startTime').val(),end_date:$('#endTime').val()}).done(function (data) {
                // 填入数据
                myChart.setOption({
                    xAxis: {
                        type:'category',
                        data: data.data.dates
                    },
                    yAxis: [{
                        min:function(value) {
                            return value.min;
                        },
                        splitLine: {show: true},
                    }],
                    series: [{
                        type: 'line',
                        showSymbol: true,
                        symbolSize:10,
                        data: data.data.values,
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ],
                            precision:6,
                        },
                        markPoint: {
                            symbolSize: 60,
                            data: [
                                { type: 'min', name: '最小值' },
                                { type: 'max', name: '最大值'}
                            ]
                        },
                        
                    }]
                });
            });
        }

        $("select#fee_type_id_2").change(function(){
            changeRate();
        });
        $('#startTime').datepicker({
            autoclose:true
        });
        $('#endTime').datepicker({
            autoclose:true
        });
        
</script>
{/block}